import React from 'react';

let Detail = React.createClass({
    contextTypes: {
        router: React.PropTypes.object
    },
    getInitialState() {
        return {
            detailData:{},
            contractDetail: {},
            rentRecordDetail: {},
            riskControlDetail: {},
            tenementDetail: {}
        }
    },
    componentDidMount(){ 
        let detailData = this.props.location.state.detailData;
        this.setState({
            tenementDetail: detailData.tenementDetail,
            contractDetail: detailData.contractDetail,
            financeDetail: detailData.financeDetail,
            riskControlDetail: detailData.riskControlDetail,
            rentRecordDetail: detailData.rentRecordDetail,
            
        });
    },

    goBack(){
        history.go(-1)
    },
    render() {
        // 房源信息
        let tenementDetail = this.state.tenementDetail;

        // 租约信息
        let contractDetail = this.state.contractDetail;
        
        // 融资信息
        
        let financeDetail = this.state.financeDetail;

        // 风控信息
        let riskControlDetail = this.state.riskControlDetail;
        console.log('financeDetail',financeDetail);
        const financeType = {
            '101': '收房贷',
            '102': '装修贷',
            '103': '租约贷'
        }

        // 租房记录
        let rentRecordDetail = this.state.rentRecordDetail;

        // 租金
        let rent;
        if ( tenementDetail.paymentWay == 1 ) {
            rent = tenementDetail.tenementRentList[0].rent;
        }else{
            let arry = [];
            let length = tenementDetail.tenementRentList?tenementDetail.tenementRentList.length:'';
            if(tenementDetail.tenementRentList){
                tenementDetail.tenementRentList.forEach((item, index) => {
                    let content = length == index +1 ?
                        (
                        <span>{item}元</span>
                        ):(
                        <span>{item}元<span className="ant-divider" /></span>
                    );
                    arry.push(content)
                });
            }
            
            rent = arry;
        }  

        return (
            <div>
                <div className="describeCon">
                    <div className="houseInfo">
                        <div className="hd clearfix"><h1 className="fl">详细信息</h1><a href="javascript:;" onClick={this.goBack} className="fr returnLink">&lt;&nbsp;返回</a></div>
                        <div className="bd"><i></i>房源地址：{tenementDetail.address}</div>
                    </div>
                    <div className="part ">
                        <h2>房源信息</h2>
                        <div className="con same">
                            <table >
                                <tbody>
                                <tr>
                                    <td className="odd">租金</td>
                                    <td className="even">{rent}/月</td>
                                    <td className="odd">付款方式</td>
                                    <td className="even">{tenementDetail.paymentWay==1? '固定': '不固定'}</td>
                                    <td className="odd">租约</td>
                                    <td className="even">{tenementDetail.contractPeriod}个月</td>
                                </tr>
                                
                                <tr>
                                    <td className="odd">租约开始时间</td>
                                    <td className="even">{tenementDetail.startTime}</td>
                                    <td className="odd">租约结束时间</td>
                                    <td className="even">{tenementDetail.endTime}</td>
                                    <td className="odd"></td>
                                    <td className="even"></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                    {
                        contractDetail?
                        <div className="part ">
                            <h2>租约信息</h2>
                            <div className="con same">
                                <table >
                                    <tbody>
                                    <tr>
                                        <td className="odd">房东</td>
                                        <td className="even">{contractDetail.renterName}</td>
                                        <td className="odd">租客</td>
                                        <td className="even">{contractDetail.realName}</td>
                                        <td className="odd">租约</td>
                                        <td className="even">{contractDetail.contractPeriod}年</td>
                                    </tr>
                                    <tr>
                                        <td className="odd">租金</td>
                                        <td className="even">{contractDetail.rent}元/月</td>
                                        <td className="odd">出租类型</td>
                                        <td className="even">{contractDetail.isShared=='1'? '是':'否'}</td>
                                        <td className="odd">付款方式</td>
                                        <td className="even">压{contractDetail.depositPeriod}付{contractDetail.rentPeriod}</td>
                                    </tr>
                                    <tr>
                                        <td className="odd">租约开始时间</td>
                                        <td className="even">{contractDetail.startTime}</td>
                                        <td className="odd">租约结束时间</td>
                                        <td className="even">{contractDetail.endTime}</td>
                                        <td className="odd"></td>
                                        <td className="even"></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>:''
                    }
                    
                    {
                        financeDetail?
                        <div className="part ">
                            <h2>融资信息</h2>
                            <div className="con same">
                                <table>
                                    <tbody>
                                    <tr>
                                        <td className="odd">申请金额</td>
                                        <td className="even orange">{financeDetail.applyAmount}元</td>
                                        <td className="odd">放款金额</td>
                                        <td className="even orange">{financeDetail.amount}元</td>
                                        <td className="odd">融资期限</td>
                                        <td className="even">{financeDetail.period}个月</td>
                                                                       
                                    </tr>
                                    <tr>
                                        <td className="odd">还款方式</td>
                                        <td className="even">{financeDetail.repaymentType == 'installment' ? '等额本息' :
                                         financeDetail.repaymentType == 'onetime' ? '一次性还本付息' : 
                                         financeDetail.repaymentType == 'month' ? '先息后本'　: '等本金'}</td>     
                                        <td className="odd">融资开始时间</td>
                                        <td className="even">{financeDetail.startTime}</td>
                                        <td className="odd">融资结束时间</td>
                                        <td className="even">{financeDetail.endTime}</td>
                                        
                                    </tr>
                                    <tr>
                                        <td className="odd">融资类型</td>
                                        <td className="even">{financeType[financeDetail.type]}</td>
                                        <td className="odd">年利率(%)</td>
                                        <td className="even orange">{financeDetail.interestRate}%</td>
                                        <td className="odd">兑付情况</td>
                                        <td className="even orange">{financeDetail.isLoan==1? '已兑付':'未兑付'}</td>
                                       
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>:''
                    }
                    {
                        riskControlDetail?
                        <div className="part ">
                            <h2>风控信息</h2>
                            <div className="riskNav">
                                <ul className="clearfix">
                                    <li className="hover">租客<span>|</span></li>
                                    <li>房东<span>|</span></li>
                                    <li>出租房<span>|</span></li>
                                </ul>
                            </div>
                            
                        </div>:''
                    }
                    
                    {
                        rentRecordDetail?
                        <div className="part part4">
                            <h2>交租信息</h2>
                            <div className="con">
                                <table>
                                    <tbody>
                                    <tr>
                                        <th>房源地址</th>
                                        <th>融资起止时间</th>
                                        <th>融资类型</th>
                                        <th>融资总金额</th>
                                        <th>年利率(%)</th>
                                        <th>更多</th>
                                    </tr>
                                    <tr>
                                        <td>方家花苑33幢3单元1301室</td>
                                        <td>2016.01.01-2017.12.31</td>
                                        <td>装修贷</td>
                                        <td>15000.00元</td>
                                        <td>12%</td>
                                        <td><a href="#">详情</a></td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>:''
                    }
                    
                </div>
            </div> 
         
  
        )
    }
})
export default Detail